<style lang="scss" scoped>
	.pvip{
		$c:rgb(247,198,169);
		padding-bottom: 100px;
		>header{
			background: #2e2e2e;
			height: 300px;
		}
		>h1{
			margin-top: -240px;
			line-height: 1;
			color: $c;
			font-weight: bold;
			@include n-row2;
			font-size: 32px;
		}
		>h2{
			line-height: 1;
			color: $c;
			@include n-row2;
			margin: 0 auto;
			margin-top: 20px;
			max-width: 1000px;
			flex-wrap: wrap;
			align-content: flex-start;
			gap:20px;
			font-size: 13px;
			>span{
				@include n-row1;
				gap:5px;
			}
		}
		.pvip-list{
			max-width: 1000px;
			margin: 0 auto;
			display: grid;
			margin-top: 50px;
      grid-template-columns: repeat(3,1fr);
			//grid-template-columns: repeat(2,1fr);
			gap:30px;
			grid-auto-rows: max-content;
			>li{
				min-width: 0;
				min-height: 0;
				height: 100%;
				--bg: rgb(202,219,255);
				--c: rgb(57,84,150);
				--btn: rgb(233,238,255);
				--head: #555;
				>header{
					width: 80%;
					margin: 0 auto;
					height: 32px;
					background: var(--bg);
					@include n-row2;
					clip-path: polygon(0 100%, 100% 100%, 90% 0, 10% 0);
					color: var(--head);
					font-size: 14px;
				}

				&:nth-child(2){
					--bg: rgb(255,238,215);
					--c: rgb(106,67,4);
					--btn: rgb(255,245,236);
				}
				&:nth-child(3){
					--bg: rgb(53,57,101);
					--c: rgb(255,210,192);
					--btn: rgb(65,67,114);
					--head: #fff;
				}
			}
			.pvip-list-price{
				background: var(--bg);
				color: var(--c);
				text-align: center;
				padding: 30px;
				position: relative;
				z-index: 2;
				box-shadow: 0  0 5px 1px $theme-shadow1;
				border-radius: 3px 3px 0 0;
				>h2{
					height: 60px;
					@include n-row2;
					font-weight: bold;
					font-size: 24px;
					margin-bottom: 30px;
				}
				>h3{
					@include n-row2;
					font-size: 13px;
					gap:5px;
					line-height: 1;
					align-items: flex-end;
					>em{
						font-weight: bold;
						font-size: 60px;
						line-height: 0.8;
					}
				}
				>h4{
					margin-top: 10px;
					line-height: 1;
					font-size: 12px;
					color: #aaa;
				}
				>h5{
					margin: 50px 0;
					line-height: 1;
					font-size: 13px;
					@include n-row2;
				}
				>button{
					@include n-row2;
					width: 100%;
					height: 40px;
					font-size: 16px;
					border-radius: 3px;
					font-weight: bold;
					background: var(--btn);
				}
			}
			.pvip-list-info{
				padding: 30px;
				position: relative;
				border-radius: 0 0 2px 2px;
				z-index: 3;
				box-shadow: 0  2px 5px 1px $theme-shadow1;
				background: $theme-bg-white1;
				>h3{
					@include n-row1;
					line-height: 1;
					color: $theme-text5;
					height: 50px;
					font-size: 12px;
				}
				>p{
					color: $theme-text2;
					font-size: 13px;
					@include n-row5;
					line-height: 1;
					&+p{
						margin-top: 20px;
					}
				}
			}
		}
	}

</style>

<template>
	<div class="pvip" v-loading="loading">
		<header></header>
		<h1>大数据获客工具</h1>
		<ul class="pvip-list">
			<li >
				<header>个人商用授权</header>
				<aside class="pvip-list-price">
					<h2>个人商业版</h2>
					<h3>低至<em>{{form.proxyPrice}}</em></h3>
<!--					<h4>每天仅需0.1元</h4>-->
					<h5>降本增效，轻松获客，解决销售难题!</h5>
					<button @click="open()">开通个人商业版</button>
				</aside>

				<article class="pvip-list-info">
					<h3>享受权益</h3>
          <div v-html="form.proxyDetail"></div>
<!--					<p><span>√ 畅享海量数据采集 </span></p>-->
<!--					<p><span>√ AI智能自动私信获客（小红书、抖音等全平台）</span></p>-->
<!--					<p><span>√ 全网获客(商家版)，私域引流神器，低成本转化精准客户</span></p>-->
				</article>
			</li>

      		<li >
				<header>加入代理商</header>
				<aside class="pvip-list-price">
					<h2>代理商</h2>
					<h3>低至<em>{{form.vipPrice}}</em></h3>
<!--					<h4>每天仅需0.1元</h4>-->
					<h5>畅享海量数据</h5>
					<button @click="open()">开通代理商</button>
				</aside>

				<article class="pvip-list-info">
					<h3>享受权益</h3>

           <div v-html="form.vipDetail"></div>
<!--					<p><span>√ 免费使用多种营销获客工具（全网/B端/抖音/直播）</span></p>-->
<!--          <p><span>√ 总部客户资源+销售培训+共享办公支持</span></p>-->
<!--          <p>√ 享永久分佣，平台技术0成本入驻</p>-->

<!--					<p><span>可将自己克隆为数字人，自动匹配嘴型，声音克隆，导入视频即可生成您在说话的短视频</span></p>-->

<!--					<h3>设计权益</h3>-->
<!--					<p><span>授权主体数量</span>1个</p>-->
<!--					<p><span>授权主体数量</span>1个</p>-->
<!--					<p><span>授权主体数量</span>1个</p>-->
<!--					<p><span>授权主体数量</span>1个</p>-->
<!--					<p><span>授权主体数量</span>1个</p>-->
<!--					<p><span>授权主体数量</span>1个</p>-->
<!--					-->
<!--					<h3>限时专享</h3>-->
<!--					<p><span>授权主体数量</span>1个</p>-->
<!--					<p><span>授权主体数量</span>1个</p>-->
				</article>
			</li>

      		<li >
				<header>企业高级版</header>
				<aside class="pvip-list-price">
					<h2>高级版</h2>
					<h3>低至<em>{{form.seniorPrice}}</em></h3>
<!--					<h4>每天仅需0.1元</h4>-->
					<h5>享受高级版企业服务</h5>
					<button @click="open()">开通代理商</button>
				</aside>

				<article class="pvip-list-info">
					<h3>享受权益</h3>
          <div v-html="form.seniorDetail"></div>
<!--					<p><span>√ 免费使用多种营销获客工具（全网/B端/抖音/直播）</span></p>-->
<!--          <p><span>√ 总部客户资源+销售培训+共享办公支持</span></p>-->
<!--          <p>√ 享永久分佣，平台技术0成本入驻</p>-->
				</article>
			</li>

		</ul>

	</div>
</template>

<script>
	export default {
		data(){
			return{
				loading:false,
				list:[
					{label: '个人专业版'},
					{label: '企业基础版'},
					// {label: '企业高级版'},
				],
        form:{
          proxyPrice:0,
          vipPrice:0,
        }
			}
		},
		mounted(){
		 this.getData()
		},
		beforeDestroy(){
		},
    methods:{
		  open(){
		    this.$alert('客服电话：18661850495', '联系客服', {
          confirmButtonText: '确定',
			  })
      },
		  async getData(row){
				const res = await this._req(this.$api.user.getUserConf());
				if(res) this.form = this.$base.params.merge(res.data,this.form)
			},
    }
	}


</script>